import React from 'react'
import { Flex, Layout } from 'antd';
import HeaderComponents from "./components/header/HeaderComponents";
import OperationBtn from "./components/operationBetweenHeader/OperationBtn";
import TableComponents from "./components/table/TableComponents";
const { Header, Footer, Sider, Content } = Layout;
export  default class ToDoList extends React.Component {

    state = {}



    render() {
        const headerStyle = {
            backgroundColor: 'transparent',
        };
        const layoutStyle = {
            borderRadius: 8,
            // overflow: 'hidden',
            width: '80%',
            // maxWidth: '80%',
            height: '30vh',
            backgroundColor: 'transparent',
            margin: 'auto',
            transform:'translateY(50%)',
        };

        const contentStyle = {
            marginTop:"10%",
            marginLeft:'8%'
        }

        return (
            <>
                <Layout style={layoutStyle}>
                    <Header style={headerStyle}>
                        <HeaderComponents/>
                    </Header>
                    <Content style={contentStyle}>
                        <OperationBtn/>
                        <TableComponents/>
                    </Content>
                </Layout>
            </>
        )
    }

}